<!--  -->
<template>
  <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
    <draggable
      class="list-group"
      tag="div"
      :value="item"
      filter=".forbid"
      :animation="200"
      handle=".drag-icon"
      :disabled="!draggable"
      :scroll="true"
      :group="formName"
      @change="onDraggableChange"
    >
      <div class="disFlxAC" v-for="(subItem, subIndex) in item" :key="subIndex">
        <div v-if="draggable" class="fontTC" style="width: 11%; margin-top: -24px">
          <img class="drag-icon" style="width: 28px; height:  28px" src="@/assets/icons/drag.png" alt="" />
        </div>
        <div style="flex: 1;">
          <template v-if="subItem && subItem.itemType === 'ApplyTable'">
            <FormItem
              v-if="subItem && disabled"
              :formItem="{
                ...subItem,
                downLoad: true
              }"
              :subIndex="subIndex"
              :disabled="disabled"
              :key="subItem.sort + '_downLoad'"
              @showMap="showMap"
              @handleInputSearch="handleInputSearch"
            >
              <slot
                name="action"
                :subItem="{
                  ...subItem,
                  downLoad: true
                }"
                :subIndex="subIndex"
              ></slot>
            </FormItem>
            <FormItem
              v-if="subItem"
              :formItem="subItem"
              :subIndex="subIndex"
              :disabled="disabled"
              :key="subItem.sort"
              @showMap="showMap"
              @handleInputSearch="handleInputSearch"
            >
              <slot name="action" :subItem="subItem" :subIndex="subIndex"></slot>
            </FormItem>
          </template>
          <template v-else-if="subItem && subItem.dataType === 'personTel'">
            <FormItem
              :formItem="subItem"
              :defPersonTel="personTel"
              :subIndex="subIndex"
              :disabled="disabled"
              :key="subItem.sort"
              @showMap="showMap"
              @handleInputSearch="handleInputSearch"
            >
              <slot name="action" :subItem="subItem" :subIndex="subIndex"></slot>
            </FormItem>
          </template>
          <template v-else>
            <FormItem
              v-if="subItem"
              :formItem="subItem"
              :subIndex="subIndex"
              :disabled="disabled"
              :key="subItem.sort"
              @showMap="showMap"
              @handleInputSearch="handleInputSearch"
            >
              <slot name="action" :subItem="subItem" :subIndex="subIndex"></slot>
            </FormItem>
          </template>
        </div>
      </div>
    </draggable>

    <MapBox ref="mapBox" :infoData="infoData" @ok="handleMapOk" />
    <slot name="footer" :form="form"></slot>
  </a-form-model>
</template>

<script>
import FormItem from '../FormItem'
import MapBox from '@/components/map'
import draggable from 'vuedraggable'
import { DataTypeEnum } from '@/enums/dataTypeEnum'
import { InterfaceTypeEnum } from '@/enums/isInternalInterface'
export default {
  props: {
    item: Array,
    formName: String,
    personTel: String,
    disabled: Boolean,
    draggable: {
      type: Boolean,
      default: false
    }
  },
  components: {
    FormItem,
    MapBox,
    draggable
  },
  computed: {
    list: {
      get() {
        return this.item
      },
      set() {
        this.item
      }
    }
  },
  data() {
    return {
      form: {},
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
      infoData: {},
      itemIndex: 0
    }
  },
  computed: {},
  watch: {},
  methods: {
    submitForm(e) {},
    showMap(data, index) {
      this.infoData =
        data.content && data.content.length >= 3
          ? { longitude: data.content[0], latitude: data.content[1] }
          : { latitude: '', longitude: '' }
      this.$nextTick(() => {
        this.$refs.mapBox.show(data.id)
      })
      this.itemIndex = index
    },
    handleMapOk(data) {
      this.item[this.itemIndex].content = [data.longitude, data.latitude, data.address, ' ']
    },

    onDraggableChange(e) {
      const { newIndex, oldIndex } = e.moved
      this.$emit('draggableChange', { newIndex, oldIndex })
    },
    handleInputSearch({ value, formGroupId, id, isInternalInterface, tianYanChaInfo }) {
      if (isInternalInterface === InterfaceTypeEnum.TianYanCha && tianYanChaInfo) {
        this.item
          .filter(item => item.formGroupId === formGroupId)
          .forEach(item => {
            let newVal = tianYanChaInfo[item.dataType]
            console.log(item.dataType, tianYanChaInfo)

            if ([DataTypeEnum.COMPANY_NATIONAL_INDUSTRY_ID].includes(item.dataType)) {
              newVal = isNaN(newVal) || newVal.toString()[0] === '0' ? item.id : Number(newVal)
            }
            if (Object.keys(tianYanChaInfo).includes(item.dataType)) {
              console.log(tianYanChaInfo, item.dataType)

              item.content = newVal
            }
          })
      } else {
        const item = this.item.find(item => item.id === id)
        item.content = value
      }
    }
  },
  created() {},
  mounted() {}
}
</script>
